<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getVideo, getArticleNext, getArticleNextComment, getVideoMid } from '../api/videodes'
import { getimage } from '../hooks/image'
import { useCounterStore } from '../stores/home'
import { storeToRefs } from 'pinia';

import { playerTime, viewCount, vidotime } from '../hooks/filters'
export default defineComponent({
  components: {},
  setup() {
    let router: any = useRouter()
    let route: any = useRoute()
    let active: any = ref(null)
    console.log('11111111111111111', route.query.videoid)
    let myvideoarrJson: any = localStorage.getItem('myvideo')
    let myvideoAll = JSON.parse(myvideoarrJson) || []
    console.log(222222222222222222222222222222, myvideoAll)
    let currentvideo = myvideoAll.filter((item: any) => {
      return item.videoid == route.query.videoid
    })[0];

    console.log('333333333333333333333currentvideo=>', currentvideo)
    let likeFun = (id: any) => {
      likeFuns(id)
    }
    // 取消喜欢
    let unlikeFun = (id: any) => {
      unlikeFuns(id)
    }
    let istoken = localStorage.getItem('token') != null;
    console.log('istoken=>', istoken)

    // pinia
    const store = useCounterStore()
    const { idarr, likearr, collectlikearr, num, tocked, userInfoheard, commentlikearr } = storeToRefs(store);
    console.log("num222=>", num)
    // 作为 action 的 increment 可以直接解构
    const { changnum, increment, incrementfalse, unlikeFuns, likeFuns, uncommentFuns, commentFuns, getUserInfoFun, collectFuns, uncollectFuns } = store;
    let collectFun = (id: any) => {
      collectFuns(id)
    }
    // 取消喜欢
    let uncollectFun = (id: any) => {
      uncollectFuns(id)
    }


    interface CommentItem {
      userInfo: UserInfoType
      content: string
      addtime: number
      count_approve: number
      ip_location: number
    }
    interface SimilarVideoItem {
      count: CountNum
      id: number
      title: string
      duration: string
      cover: string
      author: AuthorType
    }
    interface AuthorType {
      role?: string
      userinfo: UserInfoType
    }
    interface UserInfoType {
      avatar: string
      username: string
    }
    // 点赞对象
    interface CountNum {
      count_like: number
      count_view: number
      count_collect: number
      count_comment: number
      count_share: number
    }
    interface Video {
      cover: string
      title: string
      publish_time: number
      ip_location: string
      content: string
      count: CountNum
      categories: Array<CategoriesItem>
      tags: Array<{ name: string }>
      author: AuthorType
      team: Array<{
        name: string
        userinfo: UserInfoType
        role: string
      }>
    }
    interface CategoriesItem {
      category_name: string
      sub: {
        category_name: string
      }
    }
    let similar_video = ref<Array<SimilarVideoItem> | null>(null)
    let commentList = ref<Array<CommentItem> | null>(null)
    let videoList = ref<Video | null>(null)
    console.log(active) //返回按钮函数
    let back = () => {
      console.log('点击了返回')
      router.back()
    } //视频内容详情

    let mySendNoteId = route.query.videoid
    let mySendNote: any = ref(null)

    let localarr = JSON.parse(window.localStorage.getItem("myvideoArr"));

    console.log("localarr=>", localarr)

    // mySendNote.value = localarr.filter((item: any) => {
    //   return item.id == mySendNoteId

    // })
    // 给自己发评论
    let local = JSON.parse(window.localStorage.getItem("myvideocomment"))
    let mysentContent: any = ref(null)
    let mycommentid = 1111
    let newmycomment: any = ref([])
    let mycomment: any = ref(local || [])//一个空数组接着自己的评论


    let sentmtcomment = () => {
      console.log(222222);
      mycommentid += 1
      let currentTime = new Date().getTime()
      changnum(newmycomment.value.length + 1)
      console.log('11111111111', newmycomment.value.length);

      // local = JSON.parse(window.localStorage.getItem("myvideocomment"))

      // mycomment = ref(local || [])
      console.log(222222, mycomment);
      // mycomment.value.push(
      //     {
      //       // clicknoteId: mySendNoteId.value, //点击的手记id
      //       id: mycommentid+1 , //评论id
      //       contentText: mysentContent.value, //评论的内容
      //       likeCount: 0,  //评论点赞数
      //       createTimeUnix: currentTime,// 发评论的时间戳
      //       userDetail: {
      //         id: "10020974",  //发评论的人的id
      //         // avatar_small: "https://cs.xinpianchang.com/uploadfile/user/2017/04/05/58e4be784ff29.jpeg", //发评论的人的头像
      //         // nickname: "董北"  //发评论的人的昵称
      //       }

      //     }
      //   )
      if (mycomment.value.length == 0) {
        mycomment.value.push(
          {
            clicknoteId: mySendNoteId.value, //点击的手记id
            id: 2111 , //评论id
            contentText: mysentContent.value, //评论的内容
            likeCount: 0,  //评论点赞数
            createTimeUnix: currentTime,// 发评论的时间戳
            userDetail: {
              id: "10020974",  //发评论的人的id
              // avatar_small: "https://cs.xinpianchang.com/uploadfile/user/2017/04/05/58e4be784ff29.jpeg", //发评论的人的头像
              // nickname: "董北"  //发评论的人的昵称
            }

          }
        )
      }
      else {
        mycomment.value.push(
          {
            clicknoteId: mySendNoteId.value, //点击的手记id
            id: (mycomment.value[0].id ) + 1, //评论id
            contentText: mysentContent.value, //评论的内容
            likeCount: 0,  //评论点赞数
            createTimeUnix: currentTime,// 发评论的时间戳
            userDetail: {
              id: "10020974",  //发评论的人的id
              // avatar_small: "https://cs.xinpianchang.com/uploadfile/user/2017/04/05/58e4be784ff29.jpeg", //发评论的人的头像
              // nickname: "董北"  //发评论的人的昵称
            }

          }
        )
      }
   
      console.log(3333, mycomment);

      mysentContent.value = ''

      // newmycomment.value = mycomment.value.filter((item: any) => {
      //   return item.clicknoteId == mySendNoteId.value
      // })

      // // 发布时间 最新要在最上面
      newmycomment.value.sort(function (a: any, b: any) {
        return b.createTimeUnix - a.createTimeUnix
      })

      window.localStorage.setItem("myvideocomment", JSON.stringify(mycomment.value))


      console.log('222222', newmycomment.value.length);


    }
    mysentContent.value = ''

    // newmycomment.value = mycomment.value.filter((item: any) => {
    //   return item.clicknoteId == mySendNoteId.value
    // })

    // // 发布时间 最新要在最上面
    // newmycomment.value.sort(function (a: any, b: any) {
    //   return b.createTimeUnix - a.createTimeUnix
    // })

    window.localStorage.setItem("myvideocomment", JSON.stringify(mycomment.value))


    console.log('222222', newmycomment.value.length);
    // 删除我发的评论
    let delmycomment = (index: any) => {
      mycomment.value.splice(index, 1);
      console.log('21111111111=>', newmycomment.value)
      window.localStorage.setItem("myvideocomment", JSON.stringify(mycomment.value))
      local = JSON.parse(window.localStorage.getItem("myvideocomment"));
      console.log('3333333333333333', local);
    }
    // console.log("测试=>", playerTime(1684559228*1000));
    onMounted(() => {
      if (istoken) {
        getUserInfoFun();
      }
    });

    return {
      active,
      back,
      videoList,
      similar_video,

      getimage,
      playerTime,
      viewCount,
      vidotime,
      currentvideo,
      likeFun,
      unlikeFun,
      changnum,
      increment,
      incrementfalse,
      unlikeFuns,
      likeFuns,
      uncommentFuns,
      commentFuns,
      getUserInfoFun,
      istoken,
      likearr,
      collectlikearr,
      userInfoheard,
      collectFuns,
      uncollectFuns,
      uncollectFun,
      collectFun,
      sentmtcomment,
      mysentContent,
      newmycomment,
      mycomment,
      commentlikearr,
      delmycomment
    }
  }
})
</script>
<template>
  <div class="videodes">
    <!-- 顶部导航 -->
    <div class="topbar flex-space">
      <div class="left">
        <span class="iconfont icon-xiangzuojiantou" @click="back"></span>
      </div>
      <div class="right">
        <span class="iconfont icon-itv"></span>
        <span class="iconfont icon-icon_more"></span>
      </div>
    </div>
    <!-- 视频 -->
    <div class="video">
      <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
      <!-- <img :src="currentvideo.avator" alt="" /> -->
      <video :src="currentvideo.data.content" controls autoplay></video>
    </div>
    <div class="null"></div>
    <div class="border"></div>
    <!-- 视频详细介绍 -->
    <div class="introduce">
      <div class="fixed">
        <van-tabs v-model:active="active" color="#e42e22" title-active-color="#444444" title-inactive-color="#989898"
          line-width="28" swipeable sticky :offset-top="210">
          <van-tab title="简介 ">
            <div class="des">
              <div class="name">
                <!-- 2023"我们一起战斗" -->
                {{ currentvideo.title }}
              </div>
              <div class="smalltitle">
                <span>{{ playerTime(currentvideo.time) }}</span>
                <span v-if="currentvideo.ip_location">{{ currentvideo.ip_location }}</span>
                <span class="playcount">{{ viewCount(currentvideo.count.collect) }}次播放</span>
              </div>
              <!-- <div class="playcount">{{ viewCount(currentvideo.count.count_view) }}次播放</div> -->
              <div class="thanks">
                {{ currentvideo.content }}
                <!-- 感谢好朋友 -->
                <!-- <span>@ThisNoFire</span> -->
                <!-- 对此片提供的指导和灵感来源。仅用于学习交流未进行商业使用 -->
              </div>
              <div class="logo">
                <ul>
                  <li @click.stop="likeFun(currentvideo.videoid)"
                    v-if="!likearr.includes(currentvideo.videoid) || !istoken">
                    <span class="iconfont icon-dianzan" style="color:#000;"></span>
                    <p>{{ currentvideo.count_like || 0 }}</p>
                  </li>
                  <li @click.stop="unlikeFun(currentvideo.videoid)" v-else><span class="iconfont icon-dianzan_kuai "
                      style="color: red;"></span>
                    <p>{{ currentvideo.count.like + 1 }}</p>
                  </li>
                  <!-- <li>
                                  <span class="iconfont icon-dianzan_huaban"></span>
                                  <p>{{ viewCount(currentvideo.count.like) }}</p>
                                </li> -->

                  <li @click.stop="collectFun(currentvideo.videoid)"
                    v-if="!collectlikearr.includes(currentvideo.videoid) || !istoken">
                    <span class="iconfont icon-31shoucang"></span>
                    <p>
                      {{ currentvideo.count.collect || 0 }}
                    </p>
                  </li>
                  <li @click.stop="uncollectFun(currentvideo.videoid)" v-else><span class="iconfont icon-wodeshoucang "
                      style="color: yellow;font-size: 28px;"></span>
                    <p>{{
                      currentvideo.count.collect + 1 }}</p>
                  </li>
                  <!-- <li>
                                  <span class="iconfont icon-31shoucang"></span>
                                  <p>{{ viewCount(currentvideo.count.collect) }}</p>
                                </li> -->
                  <li>
                    <span class="iconfont icon-fenxiang2"></span>
                    <p>{{ viewCount(currentvideo.count.share) }}</p>
                  </li>
                </ul>
              </div>
              <div class="creator">
                <div class="creator_topbar flex-space">
                  <h1>创作人</h1>
                </div>
                <div class="creatorlist">
                  <ul>
                    <van-swipe class="my-swipe" :loop="false" :width="263" :show-indicators="false">
                      <van-swipe-item>
                        <li>
                          <div class="creatorleft">
                            <div class="image">
                              <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                              <img :src="userInfoheard.avatar" alt="" />

                              <!-- <img :src="getimage(videoList.author.userinfo.avatar)" alt="" /> -->
                              <div class="smallimage" v-if="userInfoheard.vip_flag == 1">
                                <img src="../assets/images/177会员、vip.png" alt="" />
                              </div>
                            </div>
                            <div class="creator_name">
                              <!-- <p>{{ videoList.author.userinfo.username }}</p> -->
                              <p>{{ userInfoheard.username }}</p>
                              <div class="descript">创作者</div>
                            </div>
                          </div>
                        </li>
                      </van-swipe-item>
                      <van-swipe-item v-for="(item, index) in currentvideo.team" :key="index">
                        <li>
                          <div class="creatorleft">
                            <div class="image">
                              <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                              <img :src="getimage(item.userinfo.avatar)" alt="" />
                              <div class="smallimage">
                                <img src="../assets/images/swiper1.webp" alt="" />
                              </div>
                            </div>
                            <div class="creator_name">
                              <p>{{ item.userinfo.username }}</p>
                              <div class="descript">{{ item.role }}</div>
                            </div>
                          </div>
                          <div class="creatorright">关注</div>
                        </li>
                      </van-swipe-item>
                    </van-swipe>
                  </ul>
                </div>
              </div>
              <div class="similar" v-if="similar_video">
                <h1>相似视频</h1>
                <div class="similar_list">
                  <ul>
                    <li v-for="(item, index) in similar_video" :key="index">
                      <div class="similar_video">
                        <div class="similar_left">
                          <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                          <img :src="getimage(item.cover)" alt="" />
                          <div class="time">{{ vidotime(item.duration) }}</div>
                        </div>
                        <div class="similar_right">
                          <div class="video_name text-cut">{{ item.title }}</div>
                          <div class="video_count">
                            播放量 {{ viewCount(item.count.count_view) }} 喜欢
                            {{ viewCount(item.count.count_like) }}
                          </div>
                          <div class="similar_user">
                            <div class="uerinfo">
                              <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                              <img :src="getimage(item.author.userinfo.avatar)" alt="" />
                              <div class="smalllogo">
                                <img src="../assets/images/swiper1.webp" alt="" />
                              </div>
                            </div>
                            <div class="username">{{ item.author.userinfo.username }}</div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="评论">
            <van-swipe-cell class="others-comment" v-for="(item, index) in mycomment" :key="index">
              <!-- <div class="others-comment"  v-for="(item,index) in newCommentList" :key="index"> -->
              <!-- 用户头像 -->
              <div class="comment-pic" v-if="item.userDetail">
                <img :src="userInfoheard.avatar">
              </div>

              <div class="comment-content" v-if="item.userDetail">
                <div class="nickname">
                  <p class="others-name">{{ userInfoheard.username }}
                    <!-- <span class="iconfont icon-VIP1"></span> -->
                  </p>
                  <p class="others-worlds">{{ item.contentText }}</p>
                </div>
                <!-- <div>
                                <em style="margin-right: 3px; font-size: 12px;">{{ item.likeCount }}</em>
                                <span class="iconfont icon-dianzan1"></span>
                            </div> -->
                <!-- 点赞不红 -->
                <div v-if="!commentlikearr.includes(item.id)">
                  <em style="margin-right: 3px; font-size: 12px;">{{ item.likeCount }}</em>
                  <span class="iconfont icon-dianzan" @click.stop="commentFuns(item.id)"></span>
                </div>
                <!-- 点了赞变红了 -->
                <div v-else>
                  <em style="margin-right: 3px; font-size: 12px;">{{ item.likeCount + 1 }}</em>
                  <span class="iconfont icon-dianzan_kuai" style="color:red" @click.stop="uncommentFuns(item.id)"></span>
                </div>


              </div>
              <!-- </div> -->
              <template #right>
                <van-button square type="danger" text="删除" @click="delmycomment(index)" />
              </template>
            </van-swipe-cell>
            <!-- <div class="commentlit" v-if="commentList">
                              <ul>
                                <li v-for="(item, index) in commentList" :key="index">
                                  <div class="userinfo">
                                    <img :src="getimage(item.userInfo.avatar)" alt="" />
                                  </div>
                                  <div class="comment-right">
                                    <div class="comment-username flex-space">
                                      <span>{{ item.userInfo.username }}</span>
                                      <div class="more">
                                        <span class="iconfont icon-Androidgengduo"></span>
                                      </div>
                                    </div>
                                    <div class="comment-content">{{ item.content }}</div>
                                    <div class="comment-bottom flex-space">
                                      <div class="comment-time">
                                        {{ playerTime(item.addtime * 1000) }} • {{ item.ip_location }}
                                      </div>
                                      <div class="logo">
                                        <div>
                                          <span class="iconfont icon-pinglun1"></span>
                                        </div>
                                        <span class="iconfont icon-dianzan1"></span>
                                        <em>{{ item.count_approve }}</em>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                              </ul>
                            </div> -->
            <div class="pop" v-if="mycomment.length==0">暂无评论哦~</div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="my-comment" v-show="active == 1">
      <input type="text" placeholder="我有话要说" v-model="mysentContent" @keyup.enter="sentmtcomment">
    </div>
    <div class="nulldiv" style="width:100%;height:45px"></div>

  </div>

  <br />
</template>
<style lang="scss" scoped>
.topbar {
  padding: 0 11px 0 18px;
  color: #ffffff;
  height: 42px;
  line-height: 42px;
  position: fixed;
  align-items: center;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  z-index: 3;

  .left {
    span {
      font-weight: 600;
      font-size: 17px;
    }
  }

  .right {
    span {
      font-size: 25px;

      &:first-child {
        margin-right: 15px;
        font-size: 20px;
      }
    }
  }
}

.video {
  position: fixed;
  width: 100%;
  z-index: 2;

  video {
    width: 100%;
    height: auto;
  }

  img {
    width: 100%;
    height: 210px;
  }
}

.null {
  width: 100%;
  height: 210px;
}

.van-tab {
  border-top: 1px solid #f2f2f2;
}

.border {
  width: 100%;
  height: 1px;
  background-color: #f2f2f2;
  margin-top: 44px;
  position: fixed;
  z-index: 11px;
  top: 210px;
}

.des {
  font-size: 12px;
  padding-top: 15px;

  .name {
    color: #181818;
    font-size: 18px;
    line-height: 34px;
    font-weight: 600;
    padding: 0 18px;
  }

  .smalltitle {
    color: #a5a5a5;
    line-height: 21px;
    margin-top: 4px;
    padding: 0 18px;

    span {
      margin-right: 20px;
    }
  }

  .count {
    line-height: 18px;
  }

  .playcount {
    color: #a5a5a5;
    // padding: 0 18px;
  }

  .thanks {
    color: #111111;
    line-height: 20px;
    margin-top: 12px;
    padding: 0 18px;

    span {
      color: #6092d4;
    }
  }

  .logo {
    height: 80px;
    border-bottom: 1px solid #f3f3f3;

    ul {
      display: flex;
      height: 100%;
      align-items: center;

      li {
        width: 33.33%;
        text-align: center;

        span {
          font-size: 30px;
          color: #000000;
          // font-weight: 600;
        }

        p {
          margin-top: 8px;
          color: #000000;

          font-weight: 600;
        }
      }
    }
  }

  .video_tag {
    margin-top: 10px;
    // height: 53px;
    padding: 0 18px;

    ul {
      display: flex;
      flex-wrap: wrap;
      // height: 53px;
      align-items: center;

      li {
        background-color: #f7f7f7;
        color: #878787;
        margin-right: 12px;
        padding: 5px 11px;
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
  }

  .creator {
    padding: 0 18px;

    .creator_topbar {
      line-height: 58px;
      height: 58px;

      span {
        font-size: 12px;
        color: #da5d47;
      }

      h1 {
        line-height: 58px;
        height: 60px;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .creatorlist {
      ul {
        display: flex;

        .van-swipe-item {
          margin: 3px;
          margin-right: 10px;
        }

        li {
          padding: 10px 11px;
          margin-right: -10px;
          box-sizing: border-box;
          width: 263px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 0px 0px 5px 2px #f3f3f3;
          border-radius: 10px;

          .creatorleft {
            display: flex;
            align-items: center;

            .image {
              position: relative;

              img {
                width: 47px;
                height: 47px;
                border-radius: 50%;
              }

              .smallimage {
                position: absolute;
                right: 0;
                bottom: 0;

                img {
                  width: 13px;
                  height: 13px;
                  border-radius: 50%;
                }
              }
            }

            .creator_name {
              margin-left: 8px;

              p {
                color: #000000;
                font-size: 14px;
                line-height: 20px;
              }

              .descript {
                color: #9a9a9a;
                font-size: 12px;
              }
            }
          }

          .creatorright {
            background-color: #fdeee9;
            color: #c5271a;
            border-radius: 20px;
            width: 69px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            font-size: 14px;
          }
        }
      }
    }
  }

  .similar {
    padding: 0 18px;

    h1 {
      line-height: 50px;
      padding-top: 4px;
      height: 50px;
      font-size: 16px;
      font-weight: 600;
      width: 100%;
      border-top: 1px solid #f3f3f3;
      margin-top: 16px;
    }

    .similar_list {
      ul {
        li {
          padding-bottom: 14px;
          margin-bottom: 14px;
          border-bottom: 1px solid #fafafa;

          .similar_video {
            display: flex;

            .similar_left {
              position: relative;

              img {
                width: 154px;
                height: 87px;
                border-radius: 10px;
              }

              .time {
                font-size: 12px;
                color: #fff;
                position: absolute;
                bottom: 5px;
                right: 5px;
              }
            }

            .similar_right {
              margin-left: 10px;

              .video_name {
                color: #0a0a0a;
                font-size: 14px;
                font-weight: 600;
                line-height: 19px;
                height: 38px;
                width: 175px;
              }

              .video_count {
                color: #afafaf;
                font-size: 12px;
                line-height: 20px;
                margin-top: 4px;
              }

              .similar_user {
                display: flex;
                align-items: center;
                height: 18px;
              }

              .uerinfo {
                margin-top: 4px;
                position: relative;

                img {
                  width: 14px;
                  height: 14px;
                  border-radius: 50%;
                }

                .smalllogo {
                  img {
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                  }
                }
              }

              .username {
                color: #595959;
                font-size: 12px;
                margin-left: 4px;
                margin-top: 5px;
                transform: scale(0.9);
              }
            }
          }
        }
      }
    }
  }
}

.commentlit {
  padding: 0 18px;

  ul {
    li {
      padding-top: 17px;
      padding-bottom: 2px;
      display: flex;
      width: 100%;

      .userinfo {
        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
      }

      .comment-right {
        margin-left: 12px;
        border-bottom: 1px solid #f9f9f9;
        flex: 1;

        .comment-username {
          width: 100%;

          span {
            line-height: 20px;
            color: #6d6d6d;
            font-size: 12px;
          }

          .more {
            color: #808080;

            span {
              font-size: 17px;
            }
          }
        }

        .comment-content {
          line-height: 21px;
          color: #232323;
          font-size: 14px;
        }

        .comment-bottom {
          line-height: 33px;
          align-items: center;

          .comment-time {
            color: #b2b2b2;
            font-size: 12px;
          }

          .logo {
            color: #606060;
            display: flex;
            align-items: center;
            margin-right: 10px;

            span {
              font-size: 15px;
              margin-top: -3px;
              margin-right: 4px;

              &:first-child {
                font-size: 17px;
                margin-right: 18px;
                margin-top: 3px;
              }
            }

            em {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.pop {
  font-size: 14px;
  text-align: center;
  color: #b2b2b2;
  margin-top: 50px;
}

// 发评论
.my-comment {
  width: 100%;
  height: 45px;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  border-top: 1px solid #f3f4f6;

  input {
    outline: none;
    border: none;
    background-color: #f3f4f6;
    width: 100%;
    margin: 5px auto;
    height: 35px;
    text-indent: 10px;
    font-size: 14px;
    border-radius: 5px;
    display: inline-block;
  }
}

.others-comment {

  // padding:0 15px;
  ::v-deep .van-swipe-cell__wrapper {
    width: 100%;
    display: flex;


  }

  ::v-deep .van-button {
    height: 100%;
  }

  display: flex;
  margin-top: 20px;

  .comment-pic {
    margin-left: 15px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .comment-content {
    display: flex;
    flex: 1;
    border-bottom: 2px solid #f7f7f7;
    justify-content: space-between;
    padding-bottom: 16px;

    .nickname {
      .others-name {
        color: #98979d;
        font-size: 13px;

        .icon-VIP1 {
          color: red;
        }
      }

      .others-worlds {
        margin-top: 9px;
      }

    }

    span {
      margin-right: 16px;
    }
  }
}</style>
